<template>
    <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #0f9876">
        <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden;">
            <div style="flex: 1;">
                <img src="../assets/logo.png" alt="" style="width: 100%;">
            </div>
            <div style="flex: 1; display: flex; align-items: center; justify-content: center;">
                <el-form :model="user" :rules="rules" style="width: 80%;">
                    <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">注册</div>
                    <el-form-item prop="username" label="账号">
                        <el-input size="medium" placeholder="请输入账号" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="密码">
                        <el-input size="medium" placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirmpassword">
                        <el-input size="medium" placeholder="请确认输入密码" type="password" v-model="user.confirmpassword"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" style="width: 100%;" @click="register">注册</el-button>
                    </el-form-item>
                    <div style="display: flex;">
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup name="Register">
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SIdentify from "../components/SIdentify.vue"

let user = ref({
    username: '',
    password: '',
    confirmpassword: ''
})
let rules = ref({
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' }
        
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' } ],
    confirmpassword: [
        { required: true, message: '请输入密码', trigger: 'blur' } ],
    })
let $router = useRouter()

const gotoRegister = () => {
    $router.push('/register')
}
const register = () => {
    //注册功能
}
</script>

<style>
#background {
    width: 100%;
    height: 100%;
    background: url("../assets/logo.png");
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.container {
    width: 480px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00000090;
    text-align: center;
    border-radius: 20px;
    margin-top: 10px;
}

.container h1 {
    color: aliceblue;
    margin-left: 20px;
}

.item {
    color: white;
    margin-left: 15%;
    margin-top: 35px;
    font-size: 20px;
    text-align: left;
}

.item label {
    float: left;
    width: 5em;
    margin-right: 1em;
    text-align: right;
}

input {
    margin-left: -5px;
    padding: 4px;
    border: solid 1px #4e5ef3;
    outline: 0;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    width: 200px;
    height: 23px;
    background: #f1f1f190;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

button {
    position: relative;
    height: 33px;
    width: 100px;
    background: rgba(35, 19, 252, 0.425);
    border-radius: 10px;
    margin-top: 18px;
    box-shadow: none;
    color: white;
    margin-left: 40px;
    margin-right: 10px;

}

.keep {
    color: white;
}

.keep input {
    width: 15px;
    height: 15px;
    margin-top: 7px;
    margin-left: 10px;
    margin-right: 10px;
}
</style>